<template>
	<view class="myHeader">
		<!-- #ifdef APP-PLUS -->
		<view class="header flex shadow-plain"
			:style="{
				paddingTop: statusBarHeight + 'px'
			}"
		>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
		<view class="header flex shadow-plain"
			:style="{
				paddingTop: statusBarHeight + 5 + 'px'
			}"
		>
		<!-- #endif -->
			<view class="icon">
				<u-icon name="arrow-left" color="#1e1d1d" 
					size="50"
					@click="$go(null, null, 'navigateBack')"
					></u-icon>
			</view>
			<view class="user flex" @click="$go('/pages/user/info/index?id=' + id)">
				<u-avatar :src="mergeBackPath(avatar)" :size="50"></u-avatar>
				<view class="text">
					{{nickname}}
				</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="share"
			:style="{
				paddingTop: statusBarHeight + 'px'
			}"
		>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
		<view class="share"
			:style="{
				paddingTop: statusBarHeight + 5 + 'px'
			}"
		>
		<!-- #endif -->
			<u-icon name="share-square" color="#1e1d1d" size="60"></u-icon>
		</view>
		<view class="blank"
			:style="{
				paddingTop: statusBarHeight + 'px'
			}"
		></view>
	</view>
</template>

<script>
	import {
		mergeBackPath
	} from "@/utils/file.js";
	
	export default {
		name: 'myHeader',
		props: {
			avatar: {
				type: String,
				required: true,
				default: ''
			},
			nickname: {
				type: String,
				required: true,
				default: ''
			},
			id: {
				type: Number,
				required: true,
				default: ''
			}
		},
		data() {
			return {
				// 屏幕状态栏高度
				statusBarHeight: 0,
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			})
		},
		methods: {
			mergeBackPath,
		}
	}
</script>

<style lang="scss" scoped>
.myHeader{
	.header{
		position: fixed;
		width: 100vw;
		height: 60rpx;
		background-color: white;
		overflow: hidden;
		z-index: 9999;
		.icon{
			height: 50rpx;
			cursor: pointer;
		}
		.user{
			margin-left: 20rpx;
			height: 50rpx;
			cursor: pointer;
			.text{
				max-width: 535rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 15rpx;
			}
		}
	}
	.share{
		float: right;
		margin-right: 15rpx;
	}
	.blank{
		width: 100vw;
		height: 61rpx;
		background-color: red;
	}
}	
</style>